<template>
    <section class="content">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" >
				<el-form-item>
				 <span>项目:</span><el-select v-model="project12" clearable placeholder="全部" @change="selectKey" class="myInput">
                        <el-option v-for="item in project" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                  <!-- <el-input v-model="input" class="input-w-480" placeholder="请输入内容"></el-input> -->
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="search">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-col>
        <el-col :span="24">
            <el-button type="primary" class="button-add" @click="sensorAdd = true"><i class="el-icon-edit"></i>添加传感器</el-button>
        </el-col>
         <el-col :span="24">
            <el-table :data="tableData" stripe highlight-current-row  class="table">
                <el-table-column type="index" width="60"></el-table-column>
                    <el-table-column prop="name" label="名称"> </el-table-column>
                    <el-table-column prop="deviceType.name" label="型号" width="300"> </el-table-column>
                    <el-table-column prop="address" label="模块号"> </el-table-column>
                    <el-table-column prop="chNo" label="通道号"> </el-table-column>
                    <el-table-column prop="createTime" :formatter="dateFormat" label="最后采集时间" > </el-table-column>
                    <el-table-column prop="otherInfo" label="备注"> </el-table-column>
                    <el-table-column prop="operation" label="操作" > 
                    <template slot-scope="scope">
                        <el-button  @click="deleteRow(scope.$index,scope.row)" type="text" size="small">移除</el-button>
                        <el-button   type="text"  @click="handleEdit(scope.$index, scope.row)" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <span class="show-pager">显示总数</span>
                <el-pagination
                  @current-change="handleCurrentChange"
                  @pre-click="handlePreClick"
                  @next-click="handleNextClick"
                  :current-page.sync="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total= "totalRecord" >
                </el-pagination>
              </div>
        </el-col>

         <el-dialog title="添加传感器" :visible.sync="sensorAdd" :modal='false'>
             <el-form :model="form"  >
                  <el-form-item :label-width="formLabelWidth" label="名称：">
                    <el-input v-model="form.name" placeholder="请输入名称" class="input-w-480"></el-input>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="所属项目：">
                    <el-select v-model="form.projectList" clearable placeholder="请选择" class="input-w-480" @change="projectListselectKey">
                        <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="所属DTU：">
                    <el-select v-model="form.deviceTransId" clearable placeholder="请选择" class="input-w-480" @change="deviceTransIdselectKey">
                        <el-option v-for="item in deviceTransId" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                   <el-form-item :label-width="formLabelWidth" label="模块号：">
                    <el-input v-model="form.address" placeholder="请输入模块号" class="input-w-480"></el-input>
                  </el-form-item> 
                  <el-form-item :label-width="formLabelWidth" label="采集间隔：">
                    <el-input v-model="form.collectFreq" placeholder="请输入采集间隔(整形)" class="input-w-480"></el-input>
                  </el-form-item>
                  
                  <el-form-item :label-width="formLabelWidth" label="类型/型号：" @change="deviceTypeSelectKey">
                    <el-select v-model="form.deviceType" clearable placeholder="请选择" class="input-w-480">
                        <el-option v-for="item in deviceType" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="通道号：">
                    <el-select v-model="form.chNo" clearable placeholder="请选择" class="input-w-480">
                        <el-option v-for="item in chNoTable" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="备注：">
                    <el-input v-model="form.textarea" :rows="3" type="textarea" placeholder="请输入备注" class="input-w-480"></el-input>
                  </el-form-item>
             </el-form>
                <div slot="footer" class="">
                     <el-button @click="sensorAdd = false">取消</el-button>
                    <el-button type="primary" @click="submitSensorAdd">确定</el-button>
                </div>
        </el-dialog>

         <el-dialog title="编辑传感器" :visible.sync="sensorEdit" :modal='false'>
             <el-form :model="edit"  >
                  <el-form-item :label-width="formLabelWidth" label="名称：">
                    <el-input v-model="edit.name" :placeholder="edit.name" class="input-w-480"></el-input>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="所属项目：">
                    <el-select v-model="projectlist" clearable :placeholder="projectList.name" class="input-w-480" @change="projectListselectKey">
                        <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="所属DTU：">
                    <el-select v-model="devicetransId" clearable :placeholder="deviceTransId.name" class="input-w-480" @change="deviceTransIdselectKey">
                        <el-option v-for="item in deviceTransId" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="模块号：">
                    <el-input v-model="edit.address" :placeholder="edit.address" class="input-w-480"></el-input>
                  </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="采集间隔：">
                    <el-input v-model="edit.collectFreq" :placeholder="edit.collectFreq" class="input-w-480"></el-input>
                  </el-form-item>
                  
                      
                  <el-form-item :label-width="formLabelWidth" label="类型/型号：" @change="deviceTypeSelectKey">
                    <el-select v-model="devicetype" clearable :placeholder="deviceType.name" class="input-w-480">
                        <el-option v-for="item in deviceType" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="通道号：">
                    <el-select v-model="chNo" clearable :placeholder="chNoTable.name" class="input-w-480">
                        <el-option v-for="item in chNoTable" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="备注：">
                    <el-input v-model="edit.textarea" :rows="3" type="textarea" :placeholder="edit.textarea" class="input-w-480"></el-input>
                  </el-form-item>
             </el-form>
                <div slot="footer" class="">
                     <el-button @click="sensorEdit = false">取消</el-button>
                    <el-button type="primary" @click="submitSensorEdit">确定</el-button>
                </div>
        </el-dialog>
    </section>
</template>
<script>
export default {
  data() {
    return {
      id:"",
      input: "",
      formLabelWidth: "120px",
      formoptions: [],
      sensorAdd: false,
      sensorEdit: false,
      tableData: [],
      project: [],
      projectList: [],
      projectlist:[],
      deviceType: [],
      devicetype: [],
      deviceTransId: [],
      devicetransId:[],
      project12:[],
      chNo: [],
      chNoTable: [
        {id:'1',name:'1'},
        {id:'2',name:'2'},
        {id:'3',name:'3'},
        {id:'4',name:'4'},
        {id:'5',name:'5'},
        {id:'6',name:'6'},
        {id:'7',name:'7'},
        {id:'8',name:'8'},
        {id:'9',name:'9'},
        {id:'10',name:'10'},
        {id:'11',name:'11'},
        {id:'12',name:'12'},
      ],
      form: {},
      edit: {},
      currentPage: 1,
      totalRecord: 0,
      totalPage: 0
    };
  },
  methods: {

    search(){
      let data = {
      projectId: this.project12,
      currentPage: "1",
      pageSize: "10"
    }
    this.sensorModel
      .deviceList(data)
      .then(res => {
        this.totalRecord = res.data.data.totalRecord;
        this.totalPage = res.data.data.totalPage;
        this.tableData = res.data.data.list;
      })
      .catch(err => {
        console.log(err.message);
      });
    },
    deleteRow(index, row){
      this.$confirm("是否要删除?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
      this.sensorModel.deviceCollectDelete(row.id).then(res =>{
        
      }).catch(err => {
        console.log(err.message)
      });
       this.$message({
            type: "success",
            message: "删除成功!"
          });
        this.tableData.splice(index,1)
      }).catch(() => {
         this.$message({
            type: "info",
            message: "已取消删除"
          });
      })
    },
    //添加
    submitSensorAdd(){
      let data = {
        name: this.form.name,
        projectId: this.form.projectList,
        deviceTransId: this.form.deviceTransId,
        address: this.form.address,
        "deviceType.id": this.form.deviceType,
        collectFreq: this.form.collectFreq,
        chNo: this.form.chNo,
        otherInfo: this.form.textarea,
        
      }
      console.log(data)
      this.sensorModel.deviceCollectAdd(data).then(res => {
        
        if (res.status === 200){
          this.$message({
            type: "success",
            message: res.msg
          });
          this.handleCurrentChange(event)
          this.sensorAdd = false
        }else{
          this.$message({
              type: "info",
              message: res.msg
            });
        }
      }).catch(err => {
        console.log(err.message)
      })
    },

    handleCurrentChange(event) {
      let data = {
      currentPage: this.currentPage,
      pageSize: "10"
      }
      this.sensorModel
      .queryByUser(data)
      .then(res => {
        
        this.tableData = res.data.list;
      })
      .catch(err => {
        console.log(err.message);
      });
    },
    handlePreClick(event) {
      if (this.currentPage != 1) {
        this.currentPage--;
      }
    },
    handleNextClick(event) {
      if (this.currentPage != this.totalPage) {
        this.currentPage++;
      }
    },
    handleEdit(index, row){
        
        (this.sensorEdit = true);
        (this.edit.id = row.id);
        (this.edit.name = row.name);
        (this.projectlist= row.projectId);
        (this.devicetransId = row.deviceTransId);
        (this.edit.address = row.address);
        (this.edit.collectFreq = row.collectFreq);
        (this.devicetype = row.deviceType.id);
        (this.chNo = row.chNo);
        (this.edit.textarea = row.otherInfo);
    },
    //编辑
    submitSensorEdit() {
        let data = {
            id: this.edit.id,
            name: this.edit.name,
            projectId: this.projectlist,
            "deviceType.id": this.devicetype,
            address: this.edit.address,
            collectFreq: this.edit.collectFreq,
            deviceTransId: this.devicetransId,
            chNo: this.chNo,
            otherInfo: this.edit.textarea,
        }
        console.log(data)
        this.sensorModel.deviceCollectUpdate(data).then(res => {
          
         if(res.status === 200){
           this.$message({
             type: "success",
             message: res.msg
           })
           this.sensorEdit = false
           this.handleCurrentChange(event)
         }else{
           this.$message({
              type: "info",
              message: res.msg
            });
         }
        }).catch(err => {
          console.log(err.message)
        })
    },

    selectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.project.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },
    projectListselectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.projectList.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },
    deviceTypeSelectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.deviceType.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },
    deviceTransIdselectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.deviceTransId.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },
     //时间格式化
    dateFormat:function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
       return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
     
  },
  mounted() {
    let data = {
      currentPage: "1",
      pageSize: "10"
    }
    this.sensorModel
      .queryByUser(data)
      .then(res => {
        
        this.totalRecord = res.data.totalRecord;
        this.totalPage = res.data.totalPage;
        this.tableData = res.data.list;
      })
      .catch(err => {
        console.log(err.message);
      });

    this.projectModel
      .projectGetAll()
      .then(res => {
        this.project = res.data;
        this.projectList = res.data;
      })
      .catch(err => {
        console.log(err.message);
      });

    this.sensorModel
      .deviceType()
      .then(res => {
        
        this.deviceType = res.data;
      })
      .catch(err => {
        console.log(err.message);
      });

  
      this.dtuModel.queryList().then(res => {
        console.log(res.data);
         this.deviceTransId = res.data;
      })
      .catch(err => {
        console.log(err.message);
      });
  }
};
</script>
<style scoped>
.content {
  padding-top: 10px;
  overflow-y: auto;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.el-dialog {
  width:680px;
}
</style>
